<template>
  <div>
    <el-tag
      v-for="tag in tags"
      :key="tag"
      closable
      @close="removeTag(tag)"
      style="margin-right:8px"
    >{{ tag }}</el-tag>
    <el-input
      v-if="inputVisible"
      v-model="inputValue"
      ref="inputRef"
      size="small"
      @keyup.enter="addTag"
      @blur="addTag"
      style="width:100px;margin-left:8px"
    />
    <el-button v-else size="small" @click="showInput">+ 新标签</el-button>
    <div style="margin-top:16px">
      <el-checkbox-group v-model="groups">
        <el-checkbox label="高血压组" />
        <el-checkbox label="糖尿病组" />
        <el-checkbox label="VIP组" />
      </el-checkbox-group>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
const tags = ref(['高血压', 'VIP'])
const inputVisible = ref(false)
const inputValue = ref('')
const inputRef = ref()
const groups = ref(['VIP组'])
function showInput() {
  inputVisible.value = true
  nextTick(() => inputRef.value && inputRef.value.focus())
}
function addTag() {
  if (inputValue.value && !tags.value.includes(inputValue.value)) {
    tags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
function removeTag(tag:string) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script> 